<template>
  <div class="main-box">
    <div class="box-center">
      <div class="right-box">
        <el-carousel height="360px">
          <el-carousel-item v-for="item in imgList" :key="item">
            <div class="images">
              <img :src="item" alt="">
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="left-box">
        <div v-if="false" class="box-nav">
          <img src="@/assets/images/User-on@2x.png" alt="">
          <div class="button">
            <a href="javascript:void (0)">立即注册</a>
            <a href="javascript:void (0)">立即登录</a>
          </div>
        </div>
        <div class="box-islogin">
          <div class="top-nav">
            <img class="avatar" src="@/assets/images/bgk6.webp" alt="">
            <div class="right">
              <p class="name">
                <span>Czx Biaoshu <i class="iconfont icon-vip8"></i></span>
                <b class="length"/>
              </p>
              <p class="bottom">
                <i class="iconfont icon-goumaijilu"/> <span>150</span>
                <a href="javascript:void (0)">[ 退出 ]</a>
              </p>
            </div>
          </div>
          <div class="nav-bottom">
            <div class="item">
              <img src="@/assets/images/y1.png" alt="">
              <p>申请发票</p>
            </div>
            <div class="item">
              <img src="@/assets/images/y2.png" alt="">
              <p>我的收藏</p>
            </div>
            <div class="item">
              <img src="@/assets/images/y3.png" alt="">
              <p>我的下载</p>
            </div>
            <div class="item">
              <img src="@/assets/images/y4.png" alt="">
              <p>购买记录</p>
            </div>
          </div>
          <div class="nav-button">
            <el-carousel
                        :interval="4000"
                         indicator-position="none" arrow="never"
                         type="card"
                         height="120px">
              <el-carousel-item style="width: 200px;" v-for="item in 3" :key="item">
                <img class="images" src="@/assets/images/bg3.jpg" alt="">
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    props:['data'],
    data(){
      return{
        list:[
          {
            name:'服务类模板专题',
            children:[
                '物业服务','餐饮服务','审计服务','保洁服务','配送服务','保安服务','监理服务', '广告服务', '绿化养护', '劳务外包', '养老服务', '印刷服务', '垃圾处理', '维保服务', '影视制作', '档案管理'
            ]
          },
          {
            name:'货物类模板专题',
            children:[
              '办公用品', '医疗器械', '苗木采购', '服装采购',
              '车辆行业', '系统集成', '电力设备', '教学设备',
              '生活用品', '电梯行业', '农用物品', '建筑材料',
              '家具采购', '制冷设备', '劳保用品', '应急设备'
            ]
          },
          {
            name:'工程类模板专题',
            children:[
              '建筑工程',
              '装修工程',
              '消防工程',
              '电力工程',
              '绿化工程',
              '市政工程',
              '水利工程',
              '公路工程',
              '农业工程',
              '拆除工程',
              '亮化工程',
              '供暖工程',
              '污染防治',
              '改造工程',
              '维修工程',
              '智慧工程'
            ]
          }
        ],
        imgList:[
            'https://static.mimowang.com/mimo/image_ad/banner/ad-b-8.png',
            'https://static.mimowang.com/mimo/image_ad/banner/home-20230320.png',
            'https://static.mimowang.com/mimo/image_ad/banner/home-2-20230320.png',
            'https://static.mimowang.com/mimo/banner/3.png',
        ]
      }
    }
  }
</script>

<style scoped lang="scss">
.main-box{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  .box-center{
    width: 1300px;
    height: 356px;
    display: flex;
    justify-content: space-between;
    .left-box{
      width: 450px;
      height: 356px;
      background: rgba(255,255,255,1);
      border-radius: 8px;
      padding: 15px;
      box-sizing: border-box;
      .box-nav{
        width: 100%;
        object-fit: cover;
        height: 356px;
        border-radius: 8px;
        background: rgba(255,255,255,0.5);
        text-align: center;
        //display: flex;
        //justify-content: center;
        //align-items: center;
        //flex-wrap: wrap;
        img{
          width: 80px;
          border-radius: 50%;
          object-fit: cover;
          height: 80px;
          margin-top: 100px;
        }
        .button{
          width: 100%;
          font-size: 14px;
          text-align: center;
          color: #666666;
          margin-top: 15px;
          a{
            font-size: 14px;
            color: #5887ff;
            font-weight: 600;
            margin: 0 10px;
          }
        }
      }
      .box-islogin{
        width: 100%;
        .top-nav{
          width: 100%;
          display: flex;
          .avatar{
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
          }
          .right{
            width: 200px;
            margin-left: 20px;
            .name{
              width: 100%;
              font-weight: 600;
              font-size: 14px;
              margin-top: 10px;
              position: relative;
              span{
                position: relative;
                z-index: 9;
              }
              .length{
                position: absolute;
                top: 10px;
                width: 100px;
                height: 15px;
                display: flex;
                left: 10px;
                border-radius: 20px 6px;
                background-image: linear-gradient(to right, #f9d423 0%, #ff4e50 100%);
              }
            }
            .bottom{
              width: 100%;
              font-size: 14px;
              margin-top: 15px;
              span{
                color: #ee9900;
                font-family: 'OPPOB', sans-serif;
              }
              a{
                margin-left: 10px;
                color: #ee0a24;
                font-size: 12px;
              }
            }
          }
        }
        .nav-bottom{
          width: 100%;
          height: 80px;
          margin-top: 15px;
          display: flex;
          .item{
            width: 80px;
            height: 80px;
            text-align: center;
            img{
              height: 40px;
              width: 40px;
              object-fit: cover;
            }
            p{
              font-size: 12px;
              text-align: center;
              color: #999;
            }
          }
        }
        .nav-button{
          width: 100%;
          margin-top: 20px;
          .images{
            width:200px;
            height: 120px;
            object-fit: cover;
          }
        }
      }
    }
    .right-box{
      width: 100%;
      height: 680px;
      margin-right: 12px;
      
      .images{
        width: 100%;
        height: 356px;
        img{
          width: 100%;
          border-radius: 8px;
          object-fit: cover;
          height: 356px;
        }
      }
    }
  }

}
</style>